import React from 'react';
import { Modal,Table, Upload } from 'antd';

let ModalBox = React.createClass({
    getInitialState () {
        return {
            visible: false,
            url: '',
            tranZ: 0,
        }
    },
    rowKey(data) {
        
        // console.log((this.key)++)
        return data.renterNo;
    },
    showPic (param) {
        let url = param.split('.')[0] + '_big.'+param.split('.')[1]
        console.log(url)
        this.setState({
            visible: true,
            url: param
        });
    },
    handleCancle() {
        this.setState({
            visible: false
        });
    },
    scrolling(e){
        var tranZ = this.state.tranZ;
        e = e || window.event;
        if (e.deltaY < 0) {
        //当滑轮向上滚动时
        tranZ = tranZ >=900 ? tranZ : tranZ+50;
        }else {
        //当滑轮向下滚动时
        tranZ = tranZ <= -200 ? tranZ : tranZ-50;
        }
        this.setState({
            tranZ
        })
    },
    render() {


        const columns = [{
            title: '姓名',
            dataIndex: 'renterName',
            key: 'renterName',
            width: 100
            }, {
            title: '身份证号',
            dataIndex: 'renterNo',
            key: 'renterNo',
            }, {
            title: '联系号码',
            dataIndex: 'renterPhone',
            key: 'renterPhone',
            }, {
            title: '性别',
            dataIndex: 'renterSex',
            key: 'renterSex',
            }, {
            title: '联系地址',
            dataIndex: 'renterAddress',
            key: 'renterAddress',
            }, {
            title: '工作单位',
            dataIndex: 'renterCompany',
            key: 'renterCompany',
            }, 
            {
            title: '身份证正面',
            dataIndex: 'renterFrontPic',
            render: (text, record) => {
                return (
                    <div onClick={this.showPic.bind(this, record.renterFrontPic ? record.renterFrontPic[0].url : '暂无')}>
                        <img style={{width:100,height:50}} src={record.renterFrontPic ?(record.renterFrontPic[0].url?record.renterFrontPic[0].url:'') : ''}/>
                    </div>
                )

            }
            }, {
            title: '身份证反面',
            dataIndex: 'renterBackPic',
            render: (text, record) => {
                return (
                    <div onClick={this.showPic.bind(this, record.renterBackPic ? record.renterBackPic[0].url : '暂无')}>
                        <img  style={{width:100,height:50}} src={record.renterBackPic ? (record.renterBackPic[0].url?record.renterBackPic[0].url:'')  : ''}/>
                    </div>
                )

            }
        }];
        // console.log('this.props.visible',this.props.visible)
        // console.log('this.state.url',this.state.url)
        let PicProps = {
            title: '预览',
            visible: this.state.visible,
            onCancel: this.handleCancle,
           
        }
        return (
            <div>
                <Modal width={900} {...this.props} footer={[]}>
                    <Table rowKey={this.rowKey} dataSource={this.props.renterInfoData} columns={columns} pagination={false}/>
                </Modal>
                <Modal {...PicProps}>
                    <div
                        onWheel={this.scrolling}
                        style={{ position: "relative", width: 500, height: 300, margin: '0 auto', overflow: 'hidden',perspective: 1000 }}
                    >
                        <img style={{width:400,height:200}} src={this.state.url}/>
                    </div>
                    
                </Modal>
            </div>
        )
    }
})
export default  ModalBox